/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
	<view class="page">
		<view class="mainBody">
			<view class="header">
				<u-image class="logoSrc" :src="logoSrc" width="100" height="100" border-radius="300"></u-image>
				<h2 class="mainTit">{{$t('绑定手机号')}}</h2>
			</view>
			<u-form :model="uForm" ref="uForm" class="u-m-t-30" :error-type="errorType">
				<u-form-item prop="phone" label-position="top">
					<u-input v-model="uForm.phone" :placeholder="$t('请输入手机号')" />
				</u-form-item>
				<agreement @changeAgree="changeAgree"></agreement>
			</u-form>


			<u-button type="error" :ripple="true" ripple-bg-color="rgba(0, 0, 0, 0.15)" :hair-line="false"
				shape="circle" class="u-m-t-50" mode="dark" @click="getSmsCode" :disabled="!isFinishInput">{{$t('获取验证码')}}
			</u-button>
		</view>
	

	</view>
</template>

<script>
	import agreement from '@/pagesB/components/agreement';

	export default {
		components: {
			agreement
		},
		data() {
			return {
				uForm: {
					phone: '',
				},
				isFinishInput: true,
				AppName: '',
				errorType: ['none'],
				rules: {
					phone: [{
							required: true,
							message: this.$t('请输入手机号'),
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: this.$t('手机号码不正确'),
							// 触发器可以同时用blur和change
							trigger: ['blur'],
						}
					]
				},

				phone: '',
				
				code: '', //验证码		            providerList: [],
				isWechatShow: false,
				devicetoken: '',
				appInfo: {},
				logoSrc: '',
				agreement: true,
				paramData: {},
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		watch: {
			uForm: {
				handler(val) {
					if (val.phone) {
						this.isFinishInput = true
					} else {
						this.isFinishInput = false
					}
				},
				deep: true
			}
		},
		onLoad(option) {
			this.paramData = option
			this.AppName = this.$AppName
			this.logoSrc = this.STATICURL + 'images/logo/logoWoshop300.png'
			const getPhone = uni.getStorageSync('phone');
			if (getPhone) {
				this.$set(this.uForm, 'phone', getPhone)
			}
			 
			this.getThirdLogin();
			this.appInfo = uni.getSystemInfoSync();

		},

		methods: {
			changeAgree(e) {
				this.agreement = e;
			},
			 
			// 登录
			getSmsCode(e) {
				this.$refs.uForm.validate(valid => {
					if (!this.agreement) {
						this.$toast(this.$t('请勾选用户协议'));
						return false;
					}
					if (valid) {
						this.$http.getSmsCode({
							phone: this.uForm.phone,
							type: 2
						}).then((res) => {
							if (res.status == 200) {
								this.$u.route("/pagesB/login/smsCode",{
									phone:this.uForm.phone,
									...this.paramData
								})
							}else{
								this.$toast(res.mess);
							}
						})
					} else {
						this.$toast(this.$t('请正确输入手机号'))
					}
				});


			},
			// 判断是否开启第三方登录
			getThirdLogin() {
				this.$http.getThirdLogin().then((res) => {
					if (res.status == 200) {
						this.isWechatShow = res.data.open
					}
				})
			},
			getaddMemberMobile() {
				this.$http.getaddMemberMobile({
					brand: this.appInfo.brand,
					model: this.appInfo.model,
					version: this.appInfo.version,
					system: this.appInfo.system,
					platform: this.appInfo.platform,
				}).then((res) => {
					console.log(res);
				})
			},
			navigateTo(url, data) {
				this.$navigateTo(url)
			},
			goHome() {
				uni.switchTab({
					url: '/pages/tabBar/home',
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import "~uview-ui/index.scss";

	.page {
		background: #ffffff;
		height: 100%;
	}

	.mainBody {
		padding: 200rpx 80rpx;

		.mainTit {
			margin: 30rpx 0 10rpx;
			font-size: 48rpx;
		}

		.subTit {
			font-weight: lighter;
		}
	}

	.logoSrc {
		width: 110rpx;
		height: 110rpx;
		border-radius: 200px;
		position: relative;
		box-shadow: 0 0 0 6rpx #ffd0d0, 0 0 0 14rpx #ffefef;
	}

	/deep/uni-view {
		line-height: 2.4;
	}
</style>
